<template>
  <div
    v-if="windowHight !== ''"
    :style="`min-height:${windowHight}px`"
    class="big"
  >
    <p
      class="surplus"
      v-if="response.surplus_number> 0 && state === 1"
    >剩余{{response.surplus_number}}份</p>
    <p
      class="surplus"
      v-else-if="response.surplus_number <= 0 && state === 1"
    >赠礼已领取完毕</p>
    <p
      class="surplus"
      v-else
    >{{response.is_type}}</p>
    <section class="label">
      <div class="content">
        <p class="give-title">
          <span>赠礼</span>
          <span>￥{{response.preferential_money/100}}</span>
        </p>
        <div class="name">
          {{response.title}}
        </div>
        <div class="pad">
          <div>
            <p>{{response.c_title}}</p>
            <p>{{response.chapter_count === 1 ? '单课' : '系列课'}}</p>
          </div>
          <div>
            <p>教师专题</p>
            <p>{{response.lecturer_name}}</p>
          </div>
        </div>
      </div>
    </section>
    <div class="btn-box">
      <div
        v-if="state === 2 && response.surplus_number> 0"
        @click="gode"
      >前往系列课程</div>
      <div
        v-if="state === 1"
        @click="gogo"
      >赠送好友</div>
    </div>
    <p
      class="ppp"
      v-if="state === 1 "
    >还剩余{{response.surplus_number}}份赠礼未领取，点击赠送</p>
    <p v-if="state === 1 && response.is_type_list &&  response.is_type_list.length>0">
      <div class="opopopop">
        <span class="ll-line" v-if="response.is_type_list && response.is_type_list.length>0" ></span>
        <div class="zi" v-if="response.is_type_list && response.is_type_list.length>0"> 领取详情</div>
      </div>
      <p
        v-for="(item,index) in response.is_type_list"
        :key="index"
        style="padding-left: 20px;line-height: 35px;"
      >
        <img  :src="item.cover" style="width:30px;height:30px; margin-right:5%; border-radius:50%">
        <span style="display: inline-block;margin-right:20px;">{{item.nick_name}}</span> <span style="color:#999;font-size:12px;">领取了我的赠礼</span>
      </p>
    </p>
    <div
      class="marsk"
      v-if="marsk"
    >
      <p>1、点击右上角三个点“...”，选择“发给朋友”，好友点击即可领取。
      </p>
      <p> 2、一条链接只能被一个用户使用。</p>
    </div>
  </div>
</template>

<script>
import {
  giveList
} from '@/api/give'
import {
  mapState
} from 'vuex'
import wxReady from '@/utils/wxReady'
export default {
  data () {
    return {
      windowHight: '',
      response: '',
      marsk: false,
      tsss: '',
      state: 1
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      openid: state => state.openid
    })
  },
  created () {
    if (this.$route.query.cid) {
      //       console.log(1233123123)
      //       console.log(JSON.parse(this.$route.query.cid))
      //       console.log(1233123123)

      this.fenxiang = JSON.parse(this.$route.query.cid)
      console.log(123321)
      console.log(this.fenxiang)
      console.log(123321)
    }
    // console.log(this.$route.query)
    this.give()
  },
  methods: {
    gode () {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: this.fenxiang.curriculum_id
        }
      })
      alert('进入课程')
    },
    give () {
      let obj = {
        user_id: this.user_id,
        curriculum_id: this.$route.query.curriculum_id,
        f_id: this.openid
      }
      if (this.$route.query.curriculum_id) {
        obj.curriculum_id = this.$route.query.curriculum_id
      }
      if (this.fenxiang && this.fenxiang.curriculum_id) {
        obj.curriculum_id = this.fenxiang.curriculum_id
        obj.f_id = this.fenxiang.shareid
      }
      if (this.fenxiang && this.fenxiang.shareid) {
        if (this.fenxiang.shareid == this.openid) {
          this.state = 1
        } else {
          this.state = 2
        }
      }

      giveList(obj).then(res => {
        this.$store.commit('updateLoadingStatus', {isLoading: false})
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.response = res.data.data
          this.tsss = res.data.data.title
        }
      })
    },
    wxShare () {
      let title = this.$route.query.title ? this.$route.query.title : '赠送'
      let desc = this.$route.query.title
      document.title = title
      wxReady(title, desc, 'give', this.$route.query.cover ? this.$route.query.cover : 'http://o6wndwjxn.qnssl.com/a046c201811301340249877.png',
        `&curriculum_id=${this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id}`
      ).then(() => {
        alert('赠送成功等待他人领取')
        this.marsk = false
      })
    },
    gogo () {
      this.marsk = true
    }
  },
  mounted () {
    document.title = '赠送课程'
    this.$nextTick(() => {
      this.wxShare()
      this.windowHight = document.documentElement.clientHeight
    })
  }
}
</script>

<style lang="less" scoped>
.opopopop {
  width: 100%;
  text-align: center;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 10px;
  position: relative;
  margin-bottom: 10px;

  .ll-line {
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
  }

  .zi {
    width: 40%;
    height: 40px;
    line-height: 40px;
    background-color: #f5f5f5;
    position: absolute;
    color: #999999;
    font-size: 12px;
  }
}

.big {
  width: 100%;
  background-color: #f5f5f5;
}

.surplus {
  width: 100%;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #DA4131;
  padding: 32px 0px;
}

.label {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 280px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;

    .give-title {
      width: 100%;
      height: 70px;
      background-color: #DA4131;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        display: inline-block;
        flex: 1;
        font-size: 18px;
        color: #ffffff;
      }

      span:last-of-type {
        text-align: right;
      }
    }

    .name {
      width: 100%;
      box-sizing: border-box;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #333333;
      height: 56px;
      line-height: 56px;
      font-weight: 600;
      border-bottom: solid 1px #f5f5f5;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pad {
      padding-left: 20px;

      div {
        margin-top: 15px;
        font-size: 0px;

        p:first-of-type {
          font-family: PingFangSC-Regular;
          font-size: 18px;
          color: #333333;
          padding-bottom: 10px;
        }

        p:last-of-type {
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #999999;
        }
      }
    }
  }
}

.btn-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 10px;

  div {
    width: 100%;
    height: 40px;
    background-color: #DA4131;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: PingFangSC-Regular;
    font-size: 15px;
  }
}

.ppp {
  width: 100%;
  text-align: center;
  color: #999999;
  padding-top: 20px;
}

.marsk {
  position: fixed;
  background-color: #f5f5f5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  p {
    padding: 10px 20px 0px 20px;
    font-size: 14px;
    color: #999;
  }
}
</style>
